<template>
	<div>
		<!-- 数据操作 -->
		<div>
			<el-form :inline="true" class="demo-form-inline">
				<el-button type="primary" v-if="roleActionInfoList.sysParamListMenu.sys_param_add_action" @click="openDialog('addParamDialog')">添加字段</el-button>
			</el-form>
		</div>


		
		<!-- 数据列表 -->
		<div>
			<el-table :data="tableList.paramList" style="width: 100%" border v-loading.body="loading">
			      <el-table-column type="index" width="70"></el-table-column>
			      <el-table-column label="名称" width="80">
			      	<template scope="scope">
				        <el-popover trigger="hover" placement="right">
				          <p>备注: {{ scope.row.mark }}</p>
				          <div slot="reference" class="name-wrapper">
				            <el-tag>{{ scope.row.name }}</el-tag>
				          </div>
				        </el-popover>
				      </template>
			      </el-table-column>
			      <el-table-column prop="param" label="参数名"></el-table-column>
			      <el-table-column prop="type" label="文本类型"></el-table-column>
			      <el-table-column  label="枚举值">
			      	<template scope="scope">
			      		<el-form v-if="scope.row.value">
			      			<el-form-item style="margin-bottom:0px;">
			      				<el-select placeholder="枚举值列表" v-model="paramValueList" size="small">
		                    		<el-option v-for="item in dealJson(scope.row.value)" :label="item.label" :value="item.value" :key="item.value" :disabled="true"></el-option>
				                </el-select>
			      			</el-form-item>
			      		</el-form>
			      	</template>
			      </el-table-column>
			      <el-table-column label="操作">
				      <template scope="scope">
			        		<el-button size="small" type="info" @click="editRow(scope.$index, scope.row,'editParamDialog')" v-if="roleActionInfoList.sysParamListMenu.sys_param_edit_action">编辑</el-button>
							<el-button v-if="scope.row.value && roleActionInfoList.sysParamListMenu.sys_param_edit_action" size="small" type="info" @click="editRow(scope.$index,scope.row,'editInputValueDialog')" >枚举</el-button>
			        		<el-button size="small" type="danger" icon="delete" @click="editRow(scope.$index, scope.row,'delParamDialog')" v-if="roleActionInfoList.sysParamListMenu.sys_param_del_action"></el-button>
				        
				      </template>
				    </el-table-column>

		    </el-table>
		</div>

		<!-- 添加字段对话框 -->
		<el-dialog title="添加字段" :visible.sync="dialog.addParamDialog.open"  v-if="dialog.addParamDialog.open">
			<addParamDialog @closeDialog="closeDialog('addParamDialog')" @freshList="getParamList"></addParamDialog>
		</el-dialog>
		<!-- 删除字段对话框 -->
		<el-dialog title="删除提示" :visible.sync="dialog.delParamDialog.open" size="tiny">
		  <span>确定要删除此条数据吗?</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog('delParamDialog')">取 消</el-button>
		    <el-button type="primary" @click="dialogOkBtn('delParamDialog')">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 修改字段对话框 -->
		<el-dialog title="修改信息" :visible.sync="dialog.editParamDialog.open"  v-if="dialog.editParamDialog.open">
			<editParamDialog @closeDialog="closeDialog('editParamDialog')" @freshList="getParamList" :paramInfo="form.editParamInfo"></editParamDialog>
		</el-dialog>
		
		<!-- 枚举值信息修改 -->
		<el-dialog title="枚举修改" :visible.sync="dialog.editInputValueDialog.open" v-if="dialog.editInputValueDialog.open">
			<editParamInputValueDialog @closeDialog="closeDialog('editInputValueDialog')" @freshList="getParamList" :editDataInit="form.editParamInfo"></editParamInputValueDialog>
		</el-dialog>
	</div>
</template>

<script>
import _roleAction from '../common/roleAction.vue'
import _http from '../common/http.vue'
import addParamDialog from './addParamDialog.vue'
import editParamDialog from './editParamDialog.vue'
import editParamInputValueDialog from './editParamInputValueDialog.vue'
	
export default{
	components:{addParamDialog,editParamDialog,editParamInputValueDialog},
	data(){
		return {
			//无关紧要数据
			loading:false,
			paramValueList:[],
			//重要数据
        	roleActionInfoList:_roleAction.getRoleActionFlag(this,'sysParamListMenu'),
			tableList:{
				paramList:[]
			},
			dialog:{
				addParamDialog:{
					open:false
				},
				delParamDialog:{
					open:false
				},
				editParamDialog:{
					open:false
				},
				editInputValueDialog:{
					open:false
				}
			},
			form:{
				delParamInfo:{
					id:0
				},
				editParamInfo:{

				}
			}
		}
	},

	mounted(){
		this.getParamList()
	},

	methods:{
		dealJson(item){//处理json数据
			return JSON.parse(item)
		},
		getParamList(){
    		_http.axiosRequest(this,'configParamList',{},(res)=>{
    			this.tableList.paramList = res.data
    		})
		},
		openDialog(dialog){
			this.dialog[dialog].open = true
		},
		closeDialog(dialog){
			this.dialog[dialog].open = false
		},
		editRow(index,row,dialog){
			if(dialog == 'delParamDialog'){
				this.form.delParamInfo.id = row.id
			}else if(dialog == 'editParamDialog'){
				this.form.editParamInfo = row
			}else if(dialog == 'editInputValueDialog'){
				this.form.editParamInfo = row
			}
			this.openDialog(dialog)
		},
		dialogOkBtn(dialog){
			if (dialog == 'delParamDialog') {
				this.delParamAction(this.form.delParamInfo.id,dialog)
			}
		},
		delParamAction(id,dialog){
    		_http.axiosRequest(this,'configDelParam',{id:id},(res)=>{
    			if (_http.apiResult(this,res.data)) {
    				this.getParamList()
    				this.closeDialog(dialog)
    			}
    		})
		}
	}
}

</script>